<template>
  <div class="app-container">
    <div class="video-list">
      <div class="filter-container">
        <div>课程名称：{{ videoTitle }}</div>
        <div class="filter-group">
          <div class="filter-item">
            <el-button type="primary"
                       @click="videoSort"> 编辑排序 </el-button>
          </div>
          <div class="filter-item">
            <!-- <el-upload class="upload-demo"
                       :action="serverLink"
                       :show-file-list="false"
                       :multiple="true"
                       name="video"
                       :data="uploadData"
                       :before-upload="beforeUploadVideo"
                       :on-success="handleVideoSuccess"
                       :on-progress="uploadVideoProcess"
                       :on-error="uploadError"
                       :headers="imgHeaders">
              <el-button type="primary">点击上传</el-button>
            </el-upload> -->
            <el-upload :headers="imgHeaders"
                       :http-request="chunkUpload"
                       :show-file-list="false"
                       :multiple="true"
                       :ref="chunkUpload"
                       :action="serverLink"
                       :data="uploadData"
                       :on-error="uploadError"
                       :on-success="handleVideoSuccess"
                       :before-upload="beforeUploadVideo"
                       :before-remove="beforeRemove"
                       :on-progress="uploadVideoProcess"
                       name="video">

              <el-button type="primary">上传视频</el-button>

            </el-upload>

          </div>
        </div>
      </div>
      <div>
        <template v-for="(item, i) in videoListData">
          <div class="video-item">
            <div class="video-item__flex">
              <div class="video-item__name"
                   v-if="!showSort">{{ item.videoName }}</div>
              <div class="video-item__name"
                   v-else>
                <el-input v-model="item.videoName"></el-input>
              </div>
              <div class="video-item__process btn-green"
                   v-if="item.success">上传成功</div>

            </div>
            <div class="video-item__flex">
              <div class="video-item__sort"
                   v-if="!showSort">
                排序{{ item.sort }}
              </div>
              <div class="video-item__sort"
                   v-else>
                <el-input v-model="item.sort"></el-input>
              </div>
              <div class="video-item__btn">
                <el-popconfirm class="margin-left"
                               :title="'确定删除该视频吗？'"
                               @onConfirm="videoDel(item.id)">
                  <el-button type="text"
                             class="btn-red"
                             slot="reference">
                    删除
                  </el-button>
                </el-popconfirm>
              </div>
            </div>
          </div>
        </template>
        <template v-for="v,i in processList">
          <div class="video-item">
            <div class="video-item__flex">
              <div class="video-item__name">{{v.name}}</div>
              <el-progress class="progress-size"
                           type="circle"
                           :percentage="retunProces(v.percentage)"></el-progress>
              <!-- <div class="video-item__process btn-green"
                 v-if="videoSuccess === true">
              上传成功
            </div> -->
            </div>
            <div class="video-item__flex"></div>
          </div>
        </template>

      </div>

      <div class="sort-button"
           v-show="showSort">
        <el-button plain
                   @click="cancelBtn">取消</el-button>
        <el-button type="primary"
                   @click="handleSortBtn">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getVideoEdit, getManagerCourse, getVideoDel } from '@/api/table'
import { getToken } from '@/utils/auth'
import chunkUpload from '@/utils/chunkUpload'

export default {
  name: '',
  data() {
    return {
      videoTitle: '',
      videoListData: [],
      uploadData: {
        courseId: '',
        serverPlace: '',
        sort: '',
      },
      imgHeaders: {
        TOKEN: '',
      },
      videoFlag: false,
      videoSuccess: false,
      courseId: '',
      videoUploadPercent: 0,
      showSort: false,
      processList: [],
      fileList: [],
      chunkUpload: chunkUpload,
    }
  },
  mounted() {
    this.videoList()
    this.linkInit()
  },
  methods: {
    linkInit() {
      this.imgHeaders.TOKEN = getToken()
      this.uploadData.courseId = this.$route.query.courseId
      this.uploadData.serverPlace = this.$route.query.serverPlace
      this.uploadData.imgHeaders = getToken()
    },
    async videoList() {
      const res = await getManagerCourse({
        courseSeq: this.$route.query.seq,
        serverPlace: this.$route.query.serverPlace,
      })
      this.videoListData = []
      const video = res.result.list[0]
      this.videoTitle = video.courseName
      video.videos.forEach((item) => {
        const data = {}
        data.id = item.id
        data.courseId = item.courseId
        data.videoName = item.videoName
        data.videoLink = item.videoLink
        data.thumbnail = item.thumbnail
        data.sort = item.sort
        data.videoHandle = true
        this.videoListData.push(data)
      })
    },
    beforeUploadVideo(file) {
      // console.log(file)
      // const data = {}
      // data.uid = file.uid
      // data.videoName = file.name.split('.')[0]
      // this.videoListData.push(data)
    },
    beforeRemove(file) {
      // 如果正在分片上传，则取消分片上传
      if (file.percentage !== 100) {
        this.$store.getters.chunkUploadXhr.forEach((item) => {
          item.abort()
        })
      }
    },
    handleVideoSuccess(res, files, fileList) {
      if (res.code === 200) {
        this.removeDownLoad(files)
        const data = {}
        data.uid = 0
        data.id = res.result.id
        data.sort = res.result.sort
        data.videoLink = res.result.videoLink
        data.videoName = res.result.videoName
        data.success = true
        this.videoListData.push(data)
      }
    },
    uploadVideoProcess(e, file, fileList) {
      this.processList = fileList
    },
    retunProces(num) {
      return Number(num.toFixed(0))
    },
    removeDownLoad(item) {
      var index = this.processList.indexOf(item)
      if (index !== -1) {
        this.processList.splice(index, 1)
      }
    },
    uploadError() {
      this.$message.error('视频提交失败')
    },
    async videoDel(id) {
      await getVideoDel({
        serverPlace: this.$route.query.serverPlace,
        videoId: id,
      })
      this.videoList()
      this.$message({
        type: 'success',
        message: '删除成功',
      })
    },
    videoSort() {
      this.showSort = true
    },
    async upSortVideo() {
      let videoSortData = []
      let videoIdData = []
      let videoNameData = []
      this.videoListData.forEach((item) => {
        videoSortData.push(Number(item.sort))
        videoIdData.push(Number(item.id))
        videoNameData.push(item.videoName)
      })

      const res = await getVideoEdit({
        videoIds: videoIdData,
        sorts: videoSortData,
        videoNames: videoNameData,
        serverPlace: this.$route.query.serverPlace,
      })
      this.videoList()
      this.showSort = false
      this.$message({
        type: 'success',
        message: '修改成功',
      })
    },
    handleSortBtn() {
      this.upSortVideo()
    },
    cancelBtn() {
      this.showSort = false
      this.videoList()
    },
  },
  computed: {
    serverLink: function () {
      return (
        // "http://47.116.140.240" +
        process.env.VUE_APP_BASE_API +
        'manager/course/video/add/' +
        this.$route.query.serverPlace +
        '/' +
        this.$route.query.courseId
      )
    },
  },
}
</script>

<style lang="scss" scoped>
.video-list {
  .video-item {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #3a71a8;
    padding: 5px 0;
    &__flex {
      display: flex;
      align-items: center;
    }
    &__name {
      font-weight: blod;
      font-size: 14px;
    }
    &__loading {
      color: #409eff;
    }
    &__process {
      margin-left: 10px;
      font-size: 12px;
    }
    &__btn {
      margin-left: 10px;
    }
  }
  .progress-size {
    margin-left: 10px;
  }
  .sort-button {
    margin-top: 30px;
    text-align: center;
  }
}
</style>
<style lang="scss">
.video-list {
  .el-progress-circle {
    width: 45px !important;
    height: 45px !important;
  }
}
</style>
